import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect,Link} from 'mirrorx';

class App extends React.Component { 
	constructor(props) {
		super(props);
        
        this.state={
            timeText:"",
            paying:false,
            goods:[],
            total: 0,
            goodsName: '',
        }

        this.orderNo = T.urlQuery("id");
	}

	componentDidMount(){
        this.handleTime();
        let goods = JSON.parse(sessionStorage.getItem('goods'));
        this.setState({goods})
        let arr = [];
        let total = 0;
        goods.forEach((item, index)=>{
            arr.push(item.title);
            total += Number(item.price)
        })
        let goodsName = arr.join(',');
        this.setState({goods, total, goodsName})
    }

    handleTime =()=>{
        let time = 30*60;
        if(time<=0){
            //alert("The order has expired.");
        }else{
            this.showTime(time);
            var interval = setInterval(()=>{
                time= time-1;
                this.showTime(time);
    
                if(time<=0){
                    setTimeout(() => {
                        alert("The order has expired.");
                    }, 0);
                    clearInterval(interval);
                    
                    return;
                }
            },1000);
        }
    }

    showTime = (time)=>{
        var minute = Math.floor(time/60);
        var second = time%60;
        minute = minute < 10 ? "0" + minute:minute;
        second = second < 10 ? "0" + second:second;
        var text = minute + ":"+second;
        this.setState({timeText:text});
    }

    confirmToPay = ()=>{
        const {total, goodsName} = this.state;
        T.fetch({
            url:"/pay/prePay.json",
            loading:true,
            data:{
                    bizTypeEnum:"MARKETING_ORDER",    //RENEWAL_ORDER_PAY  续期订单支付
                    orderNo: this.orderNo,
                    payPassword: "",
                    balancePayment: 0,
                    cashierPayment: {
                        uniqueNo: this.orderNo,
                        payChannel: "wx_qr",
                        amount: T.urlQuery('total'),
                        subject:goodsName
                    }
                }
        }).then((result)=>{
            if(result.success){
                let data = result.value;
                this.setState({paying:true})
            }
        });
    }

    payedAction = ()=>{
        this.setState({paying:false})
        
        T.fetch({
            url:"/pay/paySuccess.json",
            loading:true,
            data:{
                    payMethod:"WeChat_PAY",    //RENEWAL_ORDER_PAY  续期订单支付
                    orderNo: this.orderNo,
                }
        }).then((result)=>{
            if(result.success){
                let data = result.value;
                actions.routing.push("/success?id="+this.orderNo)
            }
        });
    }
   
    subTotal = (list) => {
        let total = 0;
        list.forEach((item, index)=>{
            total += Number(item.price)
        })
        return total;
    }

    // componentWillUnmount(){
	// 	sessionStorage.removeItem('goods');
	// }
    
	render() {
        const orderDetail = this.state.orderDetail;
        const Lang = window.LangMessage ||{};
		return (<div><div className="main bor-top pay" style={{paddingBottom:0}}>
        <div className="clearfix bgfw pt15 pb15 pl30 pr30 f28">
            <p className="fl">{Lang.remain_pay_time || '剩余支付時間'}</p>
            <p className="fr"><img src="/assets/images/clock.png" className="mr10 mb5" width="15" height="15"/><span id="timeSpan">{this.state.timeText}</span></p>
        </div>

        <div className="mt30 bgfw pl30 pr30 f28">
            <div className="clearfix pt30 pb30 bor-bottom">
                <p className="fl">{Lang.product_name || '產品名稱'}</p>
                <p className="fr">{Lang.price || '价格'}</p>
            </div>
            {
                this.state.goods.map((item, index)=>{
                    return (<div key={index} className="clearfix pt10 pb10">
                        <p className="fl">{item.title}</p>
                        <p className="fr color-price f30 strong">${item.price}</p>
                    </div>)
                })
            }
            <div className="clearfix pt30 pb30 bor-top">
                <p className="fl">{Lang.total || '总计'}</p>
                <p className="fr color-price f30 strong">${this.subTotal(this.state.goods)}</p>
            </div>
        </div>

        <div >
            <p className="f30 pt30 pb30 ml30 mr30 strong">{Lang.pay_type || '支付方式'}</p>
            <div className="bgfw pl30 pr30" id="payWayChooseBox">
                 <div className="clearfix pt30 pb30 bor-bottom">
                    <p className="fl"><i className=" pay-icon wechat-icon mr30 fl"></i> <span className="fl mt10">{Lang.wechat || '微信'}</span></p>
                    <i className="fr choose-box choose choosed-box mt10"></i>
                </div>
            </div>
        </div>

        <div className="footer diy_background pay-btn tac f30 fcw pt30" onClick={this.confirmToPay}>
            {Lang.pay_now || '立即支付'}
        </div>
    </div>

    {this.state.paying &&
        <div className="page-layer">
            <div className="layer-content-wrap-pay">
                <div className="layer-content">
                    <div className="tac pt20 pb10 bor-bottom clearfix pl30 pr30">
                        <p className="fl tal" style={{width:'32%'}}><img onClick={()=>this.setState({paying:false})} src="/assets/images/close1.png" style={{width:'.6rem',height:'.5rem'}}/></p>
                        <p className="f30 fl" style={{width:'33%'}}>{Lang.pay || '支付'}</p>
                        <p className="fr diy_color f26 tar none" style={{width:'32%'}}>Use Password</p>
                    </div>
                    <div className="declare-p f26 tac">
                        <p className="f26  pb20 bor-bottom tal p-relative">
                            <img src="/assets/images/payway-icon.png" style={{height:'.6rem'}} className="mr20"/>Credit Card ( 0835 ) 
                            <i className="icon-right p-absolute" style={{right:0,top:'.1rem'}}></i>
                        </p>
                        <div className="mt30">
                            <div className="page-btn-1 mt10" onClick={this.payedAction}>{Lang.confirm_pay || '確認支付'}</div>
                        </div>
                    </div>
                </div>
            </div>       
        </div>
        }
    </div>)
	}
}

export default App;   